import 'package:flutter/material.dart';

import '../colors.dart';

class DragonBall extends StatelessWidget {

  final List data;

  DragonBall(this.data);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 85,
      color: ProjectColors.CARD_DARK,
      padding: EdgeInsets.only(top: 15),
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemBuilder: (context, index) {
          return Container(
            width: 50,
            margin: EdgeInsets.only(right: 25),
            child: ItemBall(data[index]),
          );
        },
        padding: EdgeInsets.only(left: 15),
        itemCount: data.length,
      ),
    );
  }
}

class ItemBall extends StatelessWidget {

  final data;

  ItemBall(this.data);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 50,
          height: 50,
          decoration:
              BoxDecoration(color: Colors.red[500], borderRadius: BorderRadius.circular(50)),
          child: Image.network(data['iconUrl']),
        ),
        Padding(padding: EdgeInsets.only(top: 5)),
        Text(
          data['name'],
          style: TextStyle(color: Colors.white, fontSize: 10),
        )
      ],
    );
  }
}
